<template>
  <div class="container">
    <el-dialog
      title="添加加工商品"
      :visible.sync="dialog.centerDialogVisible"
      @open="openData"
      @close="cancel"
      center
      width="1200px"
    >
      <el-select
        v-model="is_avg"
        style="margin-bottom: 5px"
        placeholder="请选择入库方式"
      >
        <el-option
          v-for="item in is_avgList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="top">
        <el-select
          v-model="procurement.value"
          :multiple="false"
          filterable
          remote
          reserve-keyword
          placeholder="请选择调入采购员"
          :remote-method="insideProcurement"
          :loading="procurement.loading"
          @change="insidebuyer(procurement.value)"
        >
          <el-option
            v-for="item in procurement.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="top">
        <el-select
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          v-model="commodity"
          placeholder="请搜索可加工商品"
          :remote-method="insideRemoteMethod"
          :loading="inside.loading"
        >
          <el-option
            v-for="item in inside.option"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          size="medium"
          type="primary"
          class="handleSearch"
          icon="el-icon-search"
          @click="addGoods()"
          >添加</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        max-height="600"
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="goods_name"
          label="商品名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="erp_goods_code"
          label="商品编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="spec"
          label="规格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="category_name"
          label="种类名称"
          align="center"
        ></el-table-column>
        <el-table-column width="180px" label="入库单价" align="center">
          <template slot-scope="scope">
            <el-input-number
              :controls="false"
              v-model="scope.row.price"
              :min="0"
              controls-position="right"
              :precision="2"
              :step="1"
              size="mini"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column width="180px" label="加工数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              :controls="false"
              v-model="scope.row.num"
              :min="0"
              controls-position="right"
              :precision="2"
              :step="1"
              size="mini"
              @change="taxrate(scope)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="qty" label="箱数" align="center">
        </el-table-column>
        <el-table-column width="150px" label="入库规格" align="center">
          <template slot-scope="scope">
            <el-select
              @change="sonCount(scope)"
              v-model="scope.row.rkSpec"
              placeholder="请选择规格"
            >
              <el-option
                v-for="item in scope.row.rkSpecList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="180px">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="scope.row.remark"
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350px">
          <template slot-scope="scope">
            <el-button
              type="info"
              size="small"
              icon="el-icon-info"
              @click="details(scope)"
              >原料详情</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="addSpec(scope)"
              icon="el-icon-circle-plus-outline"
              >添加规格</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="remove(scope)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="500px"
        title="原料详情"
        :visible.sync="detailsDialog.centerDialogVisible"
        append-to-body
        center
      >
        <el-table
          :data="detailsDialog.tableData"
          border
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column
            prop="goods_name"
            label="原料名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="erp_goods_code"
            label="原料code"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goods_bar_code"
            label="原料条形码"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="num"
            label="数量"
            align="center"
          ></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog
        width="400px"
        title="添加规格"
        :visible.sync="specDialog.centerDialogVisible"
        append-to-body
        center
        @close="cancelSpec"
      >
        <el-form label-width="100px" label-position="center">
          <el-form-item label="规格：">
            <el-input-number
              size="small"
              :controls="false"
              v-model="spec"
            ></el-input-number>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelSpec">取 消</el-button>
          <el-button type="primary" @click="specNum()">确 定</el-button>
        </span>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCanProductList,
  getProductInfo,
  product,
} from "@/api/process/processList";
import { getList } from "@/api/putStorage/putStotageList";
export default {
  props: {
    dialog: Object,
  },
  data() {
    return {
      mainData: [],
      tableData: [],
      procurement: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: "",
      },
      buyer: {
        name: "",
        code: "",
        id: "",
      },
      procurementList: [],
      inside: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      },
      commodity: "",
      is_avg: "",
      detailsDialog: {
        centerDialogVisible: false,
        tableData: [],
      },
      specDialog: {
        centerDialogVisible: false,
        specId: "",
      },
      is_avgList: [
        {
          value: "0",
          label: "成本价入库",
        },
        {
          value: "1",
          label: "平均价入库",
        },
      ],
      spec: 0,
    };
  },
  methods: {
    //取消
    cancel() {
      this.dialog.centerDialogVisible = false;
      this.inside = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      };
      this.procurement = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: "",
      };
      this.is_avg = "";
      this.commodity = "";

      this.mainData = [];
      this.tableData = [];
    },

    getData(prop = "") {
      let data = {
        page: 1,
        limit: 500,
        key: prop,
      };
      //获取商品
      getCanProductList(data).then((res) => {
        this.mainData = res.data.list.data;
        this.inside.option = res.data.list.data.map((item) => {
          return {
            value: `${item.erp_goods_code}`,
            label: `${item.goods_name}`,
          };
        });
      });
    },
    purchase() {
      let datas = {
        key: "",
      };
      //获取采购员
      getList(datas).then((res) => {
        this.procurement.options = res.data.map((item) => {
          return {
            value: `${item.code}`,
            label: `${item.name}(${item.code})`,
            id: `${item.id}`,
          };
        });
        this.procurementList = res.data;
      });
    },
    //获取采购员name,code,id
    insidebuyer(e) {
      let center = this.procurementList.filter((res) => {
        return res.code == e;
      });
      this.buyer = {
        name: center[0].name,
        code: center[0].code,
        id: center[0].id,
      };
    },
    //搜索采购员
    insideProcurement(query) {
      if (query !== "") {
        this.getProcurement(query);
      } else {
        this.procurement.options = [];
      }
    },
    //获取采购员列表
    getProcurement(query) {
      let data = {
        key: query,
      };
      this.procurement.loading = true;
      getList(data).then((res) => {
        this.procurement.list = res.data.map((item) => {
          return {
            value: `${item.code}`,
            label: `${item.name}(${item.code})`,
            id: `${item.id}`,
          };
        });
        this.procurement.loading = false;
        this.procurement.options = this.procurement.list.filter((item) => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
        this.procurementList = res.data;
      });
    },
    openData() {
      this.getData();
      this.purchase();
    },
    addSpec(scope) {
      this.specDialog.centerDialogVisible = true;
      this.specDialog.specId = scope.row.goods_bar_code;
    },
    cancelSpec() {
      this.specDialog.centerDialogVisible = false;
      this.specDialog.specId = "";
      this.spec = 0;
    },
    //规格确定
    specNum() {
      if (this.spec) {
        this.tableData.forEach((res, index) => {
          if (res.goods_bar_code == this.specDialog.specId) {
            res.rkSpecList.push({
              value: this.spec,
              label: this.spec,
            });
            this.$set(this.tableData, index, res);
            this.cancelSpec();
          }
        });
      } else {
        this.$message({
          type: "info",
          message: "请输入规格",
        });
      }
    },
    sonCount(scope) {
      if (scope.row.num) {
        scope.row.qty = (
          parseFloat(res.data.num) / parseFloat(res.data.rkSpec)
        ).toFixed(4);
        this.$set(this.tableData, scope.$index, scope.row);
      } else {
        scope.row.qty = 0;
        this.$set(this.tableData, scope.$index, scope.row);
      }
    },
    //删除
    remove(scope) {
      let code = scope.row.BarCode;
      this.tableData.forEach((res, index) => {
        if (res.BarCode == code) {
          this.tableData.splice(index, 1);
        }
      });
    },
    // 添加商品
    addGoods() {
      if (this.commodity) {
        let every = this.tableData.filter((res) => {
          return this.commodity == res.erp_goods_code;
        });
        if (every.length == 0) {
          let data = {
            erp_goods_code: this.commodity,
            dccode: this.dialog.dccode,
          };
          getProductInfo(data).then((res) => {
            res.data.num = 0;
            res.data.price = 0;
            res.data.rkSpecList = [];
            res.data.rkSpec = parseFloat(res.data.rk_spec[0]);
            res.data.rkSpecList.push({
              label: parseFloat(res.data.rk_spec[0]),
              value: parseFloat(res.data.rk_spec[0]),
            });
            res.data.qty = res.data.num / res.data.rkSpec;
            res.data.remark = "";
            this.tableData.push(res.data);
          });
        } else {
          this.$message({
            type: "info",
            message: "该配料已添加",
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "请选择配料",
        });
      }
    },

    // 获取商品方法
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getData(query);
      } else {
        this.inside.options = [];
      }
    },
    //修改数量和规格
    taxrate(scope) {
      scope.row.qty = parseFloat(scope.row.num) / parseFloat(scope.row.rkSpec);
    },
    //确定
    confirm() {
      if (this.is_avg) {
        let arr = [];
        this.tableData.forEach((res) => {
          arr.push({
            goods_name: res.goods_name,
            erp_goods_code: res.erp_goods_code,
            num: res.num,
            price: res.price,
            unit: res.unit,
            qty: res.qty,
            spec: res.spec,
            remark: res.remark,
            category_code: res.category_code,
            category_name: res.category_name,
            rk_spec: res.rkSpec,
            goods_bar_code: res.goods_bar_code,
          });
        });
        let data = {
          is_avg: this.is_avg,
          dccode: this.dialog.dccode,
          buyer_id: this.buyer.id,
          buyer_code: this.buyer.code,
          buyer_name: this.buyer.name,
          product_data: JSON.stringify(arr),
        };
       
        product(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg || res.message,
            });
            this.$emit("upData");
            this.cancel();
          }
        });
      } else {
        this.$message({
          type: "info",
          message: "请选择入库方式",
        });
      }
    },
    //详情
    details(scope) {
      this.detailsDialog = {
        centerDialogVisible: true,
        tableData: scope.row.need_material,
      };
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
}
.top {
  margin-bottom: 5px;
}
</style>